import React, { Component } from 'react';
import { HomeDefaultApi } from '../request/api'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import './Home.less'
import examination from '../images/home/examination.png'
import books from '../images/home/books.png'
import practice from '../images/home/practice.png'
import subject from '../images/home/subject.png'
import LinearProgress from '@material-ui/core/LinearProgress';

class Home extends Component {
  state = {
    collect: 0,
    exam: {},
    exemItems: [
      { id: 1, itemCount: 11, title: 'Linux面试题' },
      { id: 2, itemCount: 12, title: 'java面试题' },
      { id: 3, itemCount: 13, title: 'Web面试题' },
      { id: 4, itemCount: 15, title: 'springBoot面试题' },
      { id: 5, itemCount: 19, title: 'springMVc面试题' },
      { id: 6, itemCount: 106, title: 'JVM面试题' },
    ],
    study: 0,
    wrong: 0
  }
  // 在这里面发送axios请求
  componentDidMount() {
    // console.log(this.props)
    let token = localStorage.getItem('x-auth-token');
    if (token) {
      HomeDefaultApi().then(res => {
        console.log(res)
        if (res.errCode === 0) {
          let { collect, exam, exemItems, study, wrong } = res.data;
          // this.setState({ collect, exam, exemItems, study, wrong })
          console.log(collect, exam, exemItems, study, wrong)
        }
      })
    } else {
      // 显示loading
      this.props.showLoadingFn()
      setTimeout(() => {
        // 关闭loading
        this.props.hidenLoadingFn()
        // 跳转登录页
        this.props.history.push('/login')
      }, 2000)

    }
  }

  render() {
    let { collect, exam, exemItems, study, wrong } = this.state;
    return (
      <div className='home'>
        {/* 第一个 */}
        <div className="top">
          <h2>Java学科</h2>
          <Link to='/togit'>切换考试科目< i className='iconfont icon-arrow-right-filling' /></Link>
        </div>
        {/* 第二个 */}
        <div className="banner">
          <div className='welcome'>欢迎tomato来到oo学习库</div>
          <div className="right">
            <div className="right-r">
              <h3>已学{study}题</h3>
              <div className="scor">{wrong}</div>
              <span>错题</span>
            </div>

            <div className="right-r right-l">
              <h3>共{exam.itemCount}题</h3>
              <div className="scor">{collect}</div>
              <span>收藏</span>
            </div>
          </div>
        </div>
        {/* 第三个 */}
        <div className="ad">
          <img src={examination} alt="" />
          <img src={books} alt="" />
          <img src={practice} alt="" />
        </div>
        {/* 底标题 */}
        <div className="title">
          <h3>学科题库</h3>
          <span>坚持每一天，成长看的见</span>
        </div>
        {/* 列表页 */}
        <ul className='list'>
          {exemItems.map(item => (
            <li key={item.id}>
              <img src={subject} alt="" />
              <section>
                <h3>{item.title}</h3>
                <main>{item.itemCount}/{item.itemCount}</main>
                <LinearProgress variant="determinate" value={100} />
              </section>
              {/* 路由传参`/practice/${actionCode}` */}
              <div className="btn" onClick={() => this.props.history.push(`/practice/${item.actionCode}`)}>练习</div>
              {/* <div className="btn" onClick={() => this.props.history.push(`/practice/lianxi`)}>练习</div> */}
            </li>
          ))}

        </ul>
      </div>
    );
  }
}
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    showLoadingFn() {
      dispatch({ type: 'showLoadingFn' })
    },
    hidenLoadingFn() {
      dispatch({ type: 'hidenLoadingFn' })
    }
  }
}

export default connect(null, mapDispatchToProps)(Home);